<template>
  <main>

    <div class="dg-star"><span><img v-lazy="'/static/star_logo.png'" />荣誉榜</span></div>

    <div class="grid-box">
      <div class="" v-for="(item, index) in galImgs" :key="index">
        <router-link :to="'/worksDetail/' + item.id">
          <am-image v-lazy="static_pic + item.path" :src="''" alt="" :responsive="true" />
        </router-link>
        <div class="am-text-center am-margin-vertical-sm">{{ item.name }}</div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  name: 'Gallery',
  data() {
    return {

    }
  },
  props: {
    galImgs: {
      type: Array,
      default() {
        return [
          {
            path: 'small1.jpg',
            id: '72',
            name: '金茂府—绣绮堂'
          },
          {
            path: 'small8.jpg',
            id: '72',
            name: '新天地-挪威森林'
          },
          {
            path: 'small9.jpg',
            id: '72',
            name: '凤凰城—莫洛卡'
          },
          {
            path: 'small10.jpg',
            id: '72',
            name: '祈福海湾-纳维亚'
          },
          {
            path: 'small11.jpg',
            id: '72',
            name: '万科-魅力之城'
          },
          {
            path: 'small12.jpg',
            id: '72',
            name: '恒裕嘉城-午后阳光'
          }
        ]
      }
    }
  },
  mounted() {
    $(".am-pureview").hide();
  }
}
</script>

<style lang="less" scoped>
/* @import 'amazeui/dist/css/amazeui.min.css'; */
.grid-box {
  
  display: grid; 
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 0.5rem;
}
</style>